<template>
  <transition name="message-fade" @after-leave="$emit('destroy')">
    <div class="notice-item" v-show="visible">
      <img class="icon" :src="iconMap[type]" />
      <div class="content">
        <div class="title">{{ title }}</div>
        <div class="massage">{{ description }}</div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    duration: {
      type: Number,
      default: 2000,
    },
    description: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "系统提示",
    },
    type: {
      type: String,
      default: "success",
    },
  },
  data() {
    return {
      iconMap: {
        success: ``,
        warning: ``,
        error: ``,
        info: ``,
      },
      visible: false,
    };
  },
  mounted() {
    console.log("this==", this.duration);
    this.visible = true;
    this.startTimer();
  },
  methods: {
    startTimer() {
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          this.close();
        }, this.duration);
      }
    },
    clearTimer() {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
    },
    close() {
      this.visible = false;
      this.clearTimer();
    },
    onClose() {},
  },
};
</script>

<style lang="less" scoped>
@media screen and (min-width: 751px) {
  .flex() {
    display: -moz-box;
    /* Firefox */
    display: -ms-flexbox;
    /* IE10 */
    display: -webkit-box;
    /* Safari */
    display: -webkit-flex;
    /* Chrome, WebKit */
    /* display: box; */
    display: flexbox;
    display: flex;
  }

  .notice-item {
    margin-top: 20px;
    background: #fff;
    border-radius: 5px;
    width: 380px;
    padding: 20px;
    box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
      0 9px 28px 8px #0000000d;
    .flex();
    .icon {
      content: "";
      min-width: 30px;
      height: 30px;
      border-radius: 50%;
    }
    .content {
      .flex();
      flex-direction: column;
      margin-left: 5px;
      .title {
        font-size: 16px;
        color: rgba(0, 0, 0, 0.9);
        font-weight: 500;
      }
      .massage {
        margin-top: 5px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.62);
      }
    }
  }

  @keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes fadeOutRight {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
  }

  .message-fade-enter-active {
    animation: fadeInRight 0.5s;
  }

  .message-fade-leave-active {
    animation: fadeOutRight 0.5s;
  }
}


@media screen and (max-width: 750px) {
  .flex() {
    display: -moz-box;
    /* Firefox */
    display: -ms-flexbox;
    /* IE10 */
    display: -webkit-box;
    /* Safari */
    display: -webkit-flex;
    /* Chrome, WebKit */
    /* display: box; */
    display: flexbox;
    display: flex;
  }

  .notice-item {
    margin-top: 10px;
    background: #fff;
    border-radius: 5px;
    width: 175px;
    padding: 10px;
    box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
      0 9px 28px 8px #0000000d;
    .flex();
    .icon {
      content: "";
      min-width: 20px;
      height: 20px;
      border-radius: 50%;
    }
    .content {
      .flex();
      flex-direction: column;
      margin-left: 5px;
      .title {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.9);
        font-weight: 500;
      }
      .massage {
        margin-top: 5px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.62);
      }
    }
  }

  @keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes fadeOutRight {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
  }

  .message-fade-enter-active {
    animation: fadeInRight 0.5s;
  }

  .message-fade-leave-active {
    animation: fadeOutRight 0.5s;
  }
}

</style>